<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    
    <h1>hello world</h1>
    <div id="app">
        你好{{msg}}
        <br/>
        <!-- 单向绑定示例，可以将标签属性绑定为data中的值 -->
        <h1>单向绑定示例，可以将标签属性绑定为data中的值</h1>
        <img :src="path" alt="这里是照片" style="width: 10%;"/>
        <br/>
        <a :href="own.url">点击这里，百度一下</a>
        <h1>双向绑定示例，仅对有value，适合与用户有交互的场景</h1>
        单向绑定：<input type="text" :value="msg"/><br/>
        双向绑定：<input type="text" v-model:value="msg"/>
        <h3>{{name}}</h3>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.devtools = true;
    new Vue({
        el:'#app',
        data: {
            msg: '张三',
            name: '李四name',
            path: './js/001.png',
            own: {
                url:'https://www.baidu.com'
            }
        }
    })

</script>
</html>